<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="../easyui/jquery.min.js"></script>
    <script src="../easyui/jquery.easyui.min.js"></script>
    <script src="../easyui/locale/easyui-lang-zh_CN.js"></script>
    <link rel="stylesheet" href="../easyui/themes/bootstrap/easyui.css">
    <link rel="stylesheet" href="../easyui/themes/icon.css">
    <style>
        .textbox {
            height:22px;
            padding:0 2px;
        }
        body{
            margin: 0;
            padding: 0;
        }
    </style>
<script>
    $(function(){
        $('#datagrid').datagrid({
            url:'/users/list',
            method:'get',
            columns:[[
                {
                    field:'id',
                    title:'标识符',
                    checkbox:true
                },{
                    field:'name',
                    title:'用户名'
                }
//                ,{
//                    field:'email',
//                    title:'电子邮件'
//                }
            ]],
            idField:'id',
            toolbar:'#datagrid-toolbar'
        });
        $('#dlg').dialog({
            title:'编辑',
            closed:'true',
            buttons:[
                {
                    text:'确定',
                    iconCls:'icon-ok',
                    handler:function(){
                        if(isEdit){//编辑模式
                            var rowObj = $('#datagrid').datagrid('getSelected');
                            console.log(rowObj);
                            if(rowObj !== null){//这里通过行对象来获取索引
                                //当设置datagrid的idField属性之后，就可以通过id来获取索引
//                            var index = $('#datagrid').datagrid('getRowIndex',rowObj);
                                var index = $('#datagrid').datagrid('getRowIndex',$('#id').val());
//                                console.log(index);
                                var row = {
                                    id:$('#id').val(),
                                    name:$('#name').val()
//                                email:$('#email').val()
                                };
                                $('#datagrid').datagrid('updateRow',{
                                    index:index,
                                    row:row
                                });
//                            $.get()
                                $.post('/users/edit',row,function(data,statusCode){
                                    console.log(data.changedRows);
                                    $.messager.show({
                                        title:'更新',
                                        msg:'更新的行数：'+data.changedRows,
                                        timeout:3000,
                                        showType:'slide'
                                    });
                                },'json')
                            }
                        }
                        else{//添加模式
                            var row = {
                                id:$('#id').val(),
                                name:$('#name').val()
                            };
                            $.post('/users/add',row,function(data,statusCode){
                                console.log(data.insertId);
                                console.log(statusCode);
                                $('#datagrid').datagrid('reload');
                            },'json')
                        }
//
                        $('#dlg').dialog('close');
                    }
                },
                {
                    text:'取消',
                    iconCls:'icon-cancel',
                    handler:function(){
                        $('#dlg').dialog('close');
                    }
                }
            ]
        })
    })
    var isEdit = false;
    var op={
        edit:function(){
            var selected = $('#datagrid').datagrid('getSelected');
            if(selected!==null){
                $('#id').val(selected.id);
                $('#id').attr('disabled','true');
                $('#name').val(selected.name);
//                $('#email').val(selected.email);
                isEdit = true;
                $('#dlg').dialog('open');
            }
//            alert('编辑');
        },
        add:function(){
            isEdit = false;
            $('#id').val('');
            $('#id').attr('disabled','true');
            $('#name').val('');
            $('#dlg').dialog('open');
        },
        del:function(){
//            var checkeds = $('#datagrid').datagrid('getChecked');
//            for(var i in checkeds){
//                console.log(checkeds[i]);
//            }
//            console.log(checkeds);
//            console.log('-------------------');
            var selecteds = $('#datagrid').datagrid('getSelections')
            var id = [];
            for(var i in selecteds){
                id.push(selecteds[i].id);
            }
            $.messager.confirm('删除', '你确定删除?', function(r){
                if (r){
                    $.ajax({
                        url:'/users/delete',
                        type:'post',
                        data:{id:id},
                        traditional:true,
                        success:function(data){
                            $.messager.show({
                                title:'删除',
                                msg:'删除的行数：'+data.affectedRows,
                                timeout:3000,
                                showType:'slide'
                            });
                            $('#datagrid').datagrid('reload');
                        },
                        dataType:'json'
                    });
                }
            });
        }
    }
</script>
</head>
<body>
<table id="datagrid"></table>
<div id="datagrid-toolbar">
    <a class="easyui-linkbutton" iconCls="icon-add" onclick="op.add();">添加</a>
    <a class="easyui-linkbutton" iconCls="icon-remove" onclick="op.del();">删除</a>
    <a class="easyui-linkbutton" iconCls="icon-edit" onclick="op.edit();">修改</a>
</div>
    <div id="dlg">
        <p>
            <label for="id">标识符</label>
            <input name="id" type="text" id="id" class="textbox">
        </p>
        <p>
        <label for="name">用户名</label>
        <input name="name" type="text" id="name" class="textbox">
        </p>
        <!--<p>-->
        <!--<label for="email">邮箱&nbsp;&nbsp;</label>-->
        <!--<input name="email" type="text" id="email" class="textbox">-->
        <!--</p>-->
    </div>
</body>
</html>

